<script lang="ts" setup>
import {Back, CirclePlusFilled, DocumentAdd, SwitchButton,CircleCloseFilled} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import {ButtonColor} from "@/utils/buttonsColor";
import PageTable from "@/components/PageTable/index.vue";
import SearchHeader from "@/components/SearchHeader/index.vue";
import {ElMessageBox} from "element-plus";
import {message} from "@/utils/message";
import {
  editOwnerEle,
  editOwnerRent,
  ownerEleList,
  ownerRentList,
} from "@/api/demoApi";
import RegistEleDialog from '@/views/owner/components/RegistEleDialog.vue'
import RegistRentDialog from "@/views/owner/components/RegistRentDialog.vue";
import {useRoute, useRouter} from "vue-router";
import ChangeEleDialog from "@/views/owner/components/ChangeEleDialog.vue";

defineOptions({
  name: "contractRegist"
});

/**-------------------路由参数-------------------**/
const route = useRoute()
const router = useRouter()
const contractInfo = {...route.query}


/**-------------------搜索-------------------**/
//查询参数
const queryList = [
  {key:'projectNo',label:'付款单位',type:'input'},
  {key:'projectName',label:'合同状态',type:'select',options:[
      {label:'待审核',value: 0},
      {label:'执行中',value: 1},
      {label:'已完成',value: 2},
      {label:'未开始',value: 3},
      {label:'已作废',value: 4},
    ]},
]
//分页
const pageQuery = reactive({
  page:1,
  size:15
})
//查询回调
const searchHandler = (queryForm)=>{
  console.log(queryForm)
}
//分页回调
const paginationHandler = (pageInfo) =>{
  pageQuery.page = pageInfo.page
  pageQuery.size = pageInfo.size
}


/**-------------------列表-------------------**/
//标签
const currentTab = ref(0)
const changeTab = index => {
  if(index === currentTab.value) return
  else currentTab.value = index
  getTableData()
}
//总条数
const total = ref(0)
//表格列
const eleTableColumns = [
  {label:'付款单位',key:'paymentName'},
  {label:'开始日期',key:'eleStart'},
  {label:'结束日期',key:'eleEnd'},
  {label:'结算周期',key:'eleCycle',custom:true},
  {label:'电费单价',key:'eleUnit'},
  {label:'是否浮动',key:'isFloat',custom:true},
  {label:'合同状态',key:'status',custom:true},
  {label:'作废原因',key:'cancelCase',custom:true},
  {label:'操作',key:'operation',custom:true,width: 250}
]
//表格列
const rentTableColumns = [
  {label:'付款单位',key:'paymentName'},
  {label:'合同类型',key:'rentType',custom:true},
  {label:'开始日期',key:'rentStart'},
  {label:'结束日期',key:'rentEnd'},
  {label:'结算周期',key:'rentCycle',custom:true},
  // {label:'租金G(元)/年',key:'rentG',custom:true},
  // {label:'租金S(元)/年',key:'rentS',custom:true},
  // {label:'对私处理(元)',key:'privatePay',custom:true},
  // {label:'对公处理(元)',key:'publicPay',custom:true},
  // {label:'分摊年数',key:'segmentCount',custom:true},
  // {label:'年均分摊',key:'segmentOnce',custom:true},
  // {label:'电费保证金',key:'eleDeposit',custom:true},
  // {label:'场租保证金',key:'rentDeposit',custom:true},
  {label:'合同状态',key:'status',custom:true},
  {label:'作废原因',key:'cancelCase',custom:true},
  {label:'操作',key:'operation',custom:true,width: 250}
]
//表格行数据
const eleTableData = ref([])
const rentTableData = ref([])
const getTableData = ()=>{
  if(currentTab.value ===0) {
    eleTableData.value = ownerEleList(contractInfo.projectId,contractInfo.ownerId)
  }else {
    rentTableData.value = ownerRentList(contractInfo.projectId,contractInfo.ownerId)
  }
}
getTableData()


/**-------------------操作-------------------**/
//弹窗
const registEleDialog = ref()
const registRentDialog = ref()
const changeEleDialog = ref()
const openDialog = (type:string,row:object)=>{
  switch (type){
    case 'view':
      currentTab.value===0 ? registEleDialog.value.dialogShow('查看',row) : registRentDialog.value.dialogShow('查看',row)
      break
    case 'add':
      currentTab.value===0 ? registEleDialog.value.dialogShow('添加电费合同',contractInfo) : registRentDialog.value.dialogShow('添加场租合同',contractInfo)
      break
    case 'change':
      if(currentTab.value===0){
        changeEleDialog.value.dialogShow('合同变更',row)
      }
      break
  }
}
//作废
const delHandler = async (row,type: 0|1) =>{
  try{
    const result = await ElMessageBox.prompt('该操作将使该合同与相关订单作废，请确认并填写作废原因', '合同作废',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        lockScroll:true,
        closeOnClickModal:false,
        closeOnPressEscape:false,
        inputPlaceholder: '请填写作废原因',
        inputValidator: (value)=>{
          if(!value) return '请输入作废原因'
          else return true
        },
        type: 'warning',
      }
    )
    //todo 删除接口
    if(result.action === 'confirm' && result.value) {
      row.status = 4
      row.cancelCase = result.value
      type === 0 ? editOwnerEle(row) : editOwnerRent(row)
      message('作废成功',{type:'success'})
      getTableData()
    }
  }catch(err){

  }
}
</script>

<template>
  <div class="page_container">
    <div class="left_container">
      <div class="container_title">
        {{currentTab ? '场租登记' : '电费登记'}}——{{contractInfo.projectName}}
      </div>
      <div v-if="currentTab===0" class="container_content">
<!--        顶部筛选-->
        <SearchHeader :query-list="queryList" @search="searchHandler">
          <template #button>
            <el-button :color="ButtonColor.ADD" :icon="CirclePlusFilled" @click="openDialog('add',null)">添加</el-button>
          </template>
        </SearchHeader>
        <!--    表格-->
        <PageTable :columns="eleTableColumns" :page="pageQuery.page" :size="pageQuery.size" :table-data="eleTableData" :total="total" @pagination="paginationHandler">
          <template #eleCycle="{row}">
            <span v-if="row.eleCycle===0">一月一付</span>
            <span v-if="row.eleCycle===1">一季一付</span>
            <span v-if="row.eleCycle===2">半年一付</span>
            <span v-if="row.eleCycle===3">一年一付</span>
          </template>
          <template #status="{row}">
            <el-tag v-if="row.status===0" type="primary">待审核</el-tag>
            <el-tag v-if="row.status===1" type="primary">执行中</el-tag>
            <el-tag v-if="row.status===2" type="primary">已完成</el-tag>
            <el-tag v-if="row.status===3" type="primary">未开始</el-tag>
            <el-tag v-if="row.status===4" type="danger">已作废</el-tag>
          </template>
          <template #isFloat="{row}">
            <el-tag v-if="row.isFloat===0" type="primary">否</el-tag>
            <el-tag v-if="row.isFloat===1" type="primary">是</el-tag>
          </template>
          <template #cancelCase="{row}">
            <span v-if="[0,1,2].includes(row.status)">—— ——</span>
            <span v-else>{{row.cancelCase}}</span>
          </template>
          <template #operation="{row}">
            <el-button :color="ButtonColor.VIEW" :icon="SwitchButton" plain round size="small" @click="openDialog('view',row)">查看</el-button>
            <el-button v-if="[1,3].includes(row.status)" :icon="SwitchButton" plain round size="small" type="warning" @click="openDialog('change',row)">变更</el-button>
            <el-button :color="ButtonColor.DEL" :icon="CircleCloseFilled" plain round size="small" @click="delHandler(row,0)">作废</el-button>
          </template>
        </PageTable>
      </div>
      <div v-else class="container_content">
        <!--        顶部筛选-->
        <SearchHeader :query-list="queryList" @search="searchHandler">
          <template #button>
            <el-button :color="ButtonColor.ADD" :icon="CirclePlusFilled" @click="openDialog('add',null)">添加</el-button>
          </template>
        </SearchHeader>
        <!--    表格-->
        <PageTable :columns="rentTableColumns" :page="pageQuery.page" :size="pageQuery.size" :table-data="rentTableData" :total="total" @pagination="paginationHandler">
          <template #rentType="{row}">
            <span v-if="row.rentType===0">租金G</span>
            <span v-if="row.rentType===1">租金S</span>
            <span v-if="row.rentType===2">对私处理</span>
            <span v-if="row.rentType===3">对公处理</span>
            <span v-if="row.rentType===4">保证金</span>
          </template>
          <template #rentCycle="{row}">
            <span v-if="row.rentCycle===0">一年一付</span>
            <span v-if="row.rentCycle===1">两年一付</span>
            <span v-if="row.rentCycle===2">三年一付</span>
            <span v-if="row.rentCycle===3">五年一付</span>
            <span v-if="row.rentCycle===4">十年一付</span>
            <span v-if="row.rentCycle===5">一次付清</span>
          </template>
          <template #status="{row}">
            <el-tag v-if="row.status===0" type="primary">待审核</el-tag>
            <el-tag v-if="row.status===1" type="primary">执行中</el-tag>
            <el-tag v-if="row.status===2" type="primary">已完成</el-tag>
            <el-tag v-if="row.status===3" type="primary">未开始</el-tag>
            <el-tag v-if="row.status===4" type="danger">已作废</el-tag>
          </template>
          <template #cancelCase="{row}">
            <span v-if="[0,1,2].includes(row.status)">—— ——</span>
            <span v-else>{{row.cancelCase}}</span>
          </template>
          <template #operation="{row}">
            <el-button :color="ButtonColor.VIEW" :icon="SwitchButton" plain round size="small" @click="openDialog('view',row)">查看</el-button>
            <el-button v-if="row.status === 1" :color="ButtonColor.EDIT" :icon="SwitchButton" plain round size="small" @click="openDialog('change',row)">终止</el-button>
            <el-button v-if="row.status === 0" :color="ButtonColor.DEL" :icon="CircleCloseFilled" plain round size="small" @click="delHandler(row,1)">作废</el-button>
          </template>
        </PageTable>
      </div>
    </div>
    <div class="right_container">
      <div class="button_item" @click="router.go(-1)">
        <el-button :icon="Back" round type="info">返回</el-button>
      </div>
      <div class="button_item" @click="changeTab(0)">
        <el-button :icon="DocumentAdd" :type="currentTab===0 ? 'success' : 'primary'" round>电费登记</el-button>
      </div>
      <div class="button_item" @click="changeTab(1)">
        <el-button :icon="DocumentAdd" :type="currentTab===1 ? 'success' : 'primary'" round>场租登记</el-button>
      </div>
    </div>

<!--    电费登记弹窗-->
    <RegistEleDialog ref="registEleDialog" @done="getTableData" />
<!--    电费变更-->
    <ChangeEleDialog ref="changeEleDialog" @done="getTableData" />
    <!--    场租登记弹窗-->
    <RegistRentDialog ref="registRentDialog" @done="getTableData" />
  </div>
</template>

<style lang="scss" scoped>
.page_container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 !important;
  padding: 1vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;

  .left_container {
    width: 86%;
    height: 100%;
    border-radius: 1.5vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .container_title {
      width: 100%;
      height: 6%;
      display: flex;
      align-items: center;
      padding: 0 2vh;
      font-size: 2vh;
      font-weight: 700;
      color: #666;
      border-bottom: 1px solid #eee;
    }

    .container_content {
      width: 100%;
      height: 94%;
      padding: 0.8vh 1.5vh;
      display: flex;
      flex-direction: column;
    }
  }
  .right_container {
    width: 14%;
    height: 100%;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;

    .button_item {
      width: 80%;
      margin: 20px 0;

      :deep(.el-button) {
        width: 100%;
        height: 40px;
        font-size: 1.5vh;
      }
    }
  }
}
</style>
